<template>
  <div class="body">
    <div class="head">
      <div class="clienttopleft">
				欢迎使用重明新闻网站，感谢您的使用！
			</div>
      <div class="clienttopright">
        <div @click="gohome" class="gohome">新闻首页</div>
        <el-button @click="denglu" v-if="$userInfo.token == ''"  size="mini" type="primary" round>登录</el-button>
				<div class="ma-img" v-else>
						<img v-if="$user_pic != 'undefined' && $user_pic != 'null' && $user_pic != ''" class="headimg" :src="$user_pic">
						<img v-else class="headimg" src="../../assets/img/head.png">
       </div>
			</div>
    </div>
    <div class="lookNews">
      <div class="leftContent">
        <div class="newsTitle">{{detailList.aname}}</div>
        <div class="newsCome">来源: {{detailList.author}} | {{detailList.pubilshDate}}</div>
        <div class="content" v-for="item,index in detailList.content" :key="index">
          <div class="contentText" v-if="item.type == 'text'">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.content}}
          </div>
          <div v-else>
            <div class="contentImg">
              <el-image
                style="width:600px;height:350px;border-radius: 10px;"
                :src="item.content"
                :fit="'cover'">
              </el-image>
            </div>
          </div>
        </div>
        <div class="pinlun">
          <h2 class="pushpinlun">
            发表评论
          </h2>
          <div class="mepinglun">
            <div class="x-interact-publish-cont">
                <div class="headimg">
                  <img v-if="$user_pic != 'undefined' && $user_pic != 'null' && $user_pic != ''" slot="reference" class="headimgsize" :src="$user_pic">
						      <img v-else slot="reference" class="headimgsize" src="../../assets/img/head.png">
                </div>
                <textarea :disabled="$userInfo.token == ''" v-model="contentText" contenteditable="true" class="text-area" placeholder="发表神评妙论"></textarea>
            </div>
            <div class="pinglunbutton">
              <el-button @click="pushpinglun" :disabled="$userInfo.token == ''||showbutton" size="mini" type="primary" round>发表</el-button>
            </div>
          </div>
        </div>
        <div class="pinlunlist">
          <h2 class="pushpinlun">
            评论列表（{{pinglunform.total}}条）
          </h2>
          <div class="pinglunContent" v-for="item,index in pinglunform.detailList" :key="index">
            <div class="contentheadimg">
						      <img slot="reference" class="headimgsize" :src="item.uid.user_pic">
            </div>
            <div>
              <h5 class="commentName">{{item.uid.nickname}}</h5>
              <div class="commentcontent">{{item.content}}</div>
              <div class="commenttime">{{item.ctime}}</div>
            </div>
          </div>
          <div @click="querypinglun('add')" v-if="pinglunloading == 1" class="xcp-list-loader " data-parent-id="0">
            <span>查看更多评论</span>
          </div>
          <div v-else-if="pinglunloading == 2" class="xcp-list-loader " data-parent-id="0">
            <span>正在加载...</span>
          </div>
        </div>
      </div>
      <div class="rightContent">
        <div class="authorRelevant">
          <div class="authorRelevantName">作者相关</div>
          <div class="authorRelevantContent" v-for="item,index in authorList" :key="index">
            <el-image
                style="width:112px;height:75px;border-radius: 10px;cursor: pointer;"
                :src="item.cover"
                @click="golookNews(item)"
                :fit="'cover'">
            </el-image>
            <div class="authorRelevantContentName" >
              <div @click="golookNews(item)" class="authorRelevantContentNametext">{{item.aname}}</div>
              <div class="authorRelevantContetnum">最近时间 &nbsp;&nbsp;&nbsp;{{item.fanwen}}阅读</div>
            </div>
          </div>
        </div>
        <div class="authorRelevant" style="margin-top:30px;">
          <div class="authorRelevantName">相关推荐</div>
          <div class="authorRelevantContent" @click="golookNews(item)" v-for="item,index in relevant" :key="index">
            <el-image
                style="width:112px;height:75px;border-radius: 10px;cursor: pointer;"
                :src="item.cover"
                @click="golookNews(item)"
                :fit="'cover'">
            </el-image>
            <div class="authorRelevantContentName" >
              <div @click="golookNews(item)" class="authorRelevantContentNametext">{{item.aname}}</div>
              <div class="authorRelevantContetnum">最近时间 &nbsp;&nbsp;&nbsp;{{item.fanwen}}阅读</div>
            </div>
          </div>
        </div>
        <div class="authorRelevant" style="margin-top:30px;">
          <div class="authorRelevantName">新闻热搜</div>
          <div class="newsHot" @click="golookNews(item)" v-for="item,index in hotNews" :key="index">
            <div  class="newsHotindex"
                  :style="{color: index == 0 ? '#FE2D46' :
																  index == 1 ? '#FF6600' :
																  index == 2 ? '#FAA90E' : '',}">{{index+1}}</div>
            <div class="newsHotname">{{item.aname}}</div>
            <div class="newsHotstate"
                :style="{backgroundColor: item.aredu == 0 ? '' :
																item.aredu == 1 ? '#FE2D46' :
																item.aredu == 2 ? '#FAA90E' : '',}">
                {{item.aredu == 1?'热':item.aredu == 2?'新':''}}
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      showbutton:false,
      pinglunloading:1,
      detailList:[],
      hotNews:[],
      relevant:[],
      authorList:[],
      contentText:'',
      pinglunform:{
        total:0,
        detailList:[]
      },
      pinglunData:{
        aid:'',
        number:1,
        page:10,
        total:0
      }
    }
  },
  created(){},
  mounted(){
    this.query()
    this.queryhotnews()
    this.queryRelevant()
    this.queryAuthor()
    this.querypinglun()
  },
  methods:{
    //触发登录
		denglu(){
			this.$router.push("/record");
		},
    gohome(){
      this.$router.push("/client/clientHome");
    },
    query(){
      this.$http.post('/api/details',{aid:this.$route.query.aid}).then(res => {
            if(res.status == 0){
              this.detailList = res.message[0]
            }else{
              this.$message({
                message: res.message,
                type: 'error'
              });
            }
          }).catch(err => {
            this.$message({
                message: err,
                type: 'error'
              });
          })
    },
    queryhotnews(){
			this.$http.get('/api/hot_search').then(res => {
        if(res.status == 0){
					this.hotNews = res.message
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.$message({
            message: err,
            type: 'error'
          });
      })
		},
    queryRelevant(){
      this.$http.post('/api/new_relevant',{aid:this.$route.query.aid}).then(res => {
        if(res.status == 0){
					this.relevant = res.message
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.$message({
            message: err,
            type: 'error'
          });
      })
    },
    queryAuthor(){
      this.$http.post('/api/author_relevant',{aid:this.$route.query.aid}).then(res => {
        if(res.status == 0){
					this.authorList = res.message
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.$message({
            message: err,
            type: 'error'
          });
      })
    },
    querypinglun(add,f5){
      if(add == 'add'){
        this.pinglunData.number += 1
      }
      if(f5 == 'f5'){
        this.pinglunData.number = 1
        this.pinglunform.detailList = []
      }
      if(this.pinglunloading != 1) return
      this.pinglunloading = 2
      this.pinglunData.aid = this.$route.query.aid
      this.$http.post('/api/art_content',this.pinglunData).then(res => {
        this.pinglunloading = 1
        if(res.status == 0){
          this.pinglunform.total = res.total
					this.pinglunform.detailList = this.pinglunform.detailList.concat(res.message)
          if(this.pinglunform.detailList.length >= this.pinglunform.total){
            this.pinglunloading = 0
          }
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.pinglunloading = 1
        this.$message({
            message: err,
            type: 'error'
        });
      })
    },
    pushpinglun(){
      if(this.contentText === '') return
      this.showbutton = true
      let data = {
        aid:this.$route.query.aid,
        uid:this.$userInfo._id,
        content:this.contentText
      }
      this.$http.post('/artcate/content',data).then(res => {
        this.showbutton = false
        if(res.status == 0){
          this.pinglunloading = 1
          this.querypinglun('1','f5')
          this.contentText = ''
					this.$message({
            message: '发表成功',
            type: 'success'
          });
        }else{
          this.showbutton = false
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.$message({
            message: err,
            type: 'error'
        });
      })
    },
    golookNews(item){
			window.open('/client/lookNews?aid=' + item._id)
		},
  },
}
</script>
<style scoped>
.body{
	overflow: auto;
	width: 100%;
	position: fixed;
	top: 0;
  right: 0;
  left: 0;
	bottom: 0;
}
.head{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: white;
  z-index: 999;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
  display: flex;
  align-items: center;
}
.lookNews{
  display: flex;
  justify-content: center;
  padding: 50px 10px;
  min-width: 1006px;
}
.newsTitle{
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-size: 36px;
  line-height: 50px;
  padding-top: 35px;
  padding-bottom: 25px;
  text-align: justify;
  font-weight: 600;
  font-family: Microsoft Yahei,微软雅黑,宋体;
  -webkit-font-smoothing: antialiased;
}
.leftContent{
  width: 650px;
}
.content{
  font-size: 17px;
  line-height: 24px;
  color: rgb(71, 70, 70);
}
.contentText{
  font-size: 17px;
  line-height: 24px;
  color: #333;
  padding-bottom:20px ;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
.contentImg{
  display: flex;
  justify-content: center;
  padding-bottom:20px ;
}
.rightContent{
  padding: 50px 0;
  width: 272px;
  margin-left: 64px;
}
.authorRelevant{
  width: 100%;
}
.authorRelevantName{
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #222;
  line-height: 16px;
  font-weight: 600;
}
.authorRelevantContent{
  padding-top: 16px;
  font-weight: 400;
  display: flex;
  width: 272px;
  height: 75px;
}
.authorRelevantContentName{
  margin-left: 16px;
  width: 144px;
  height: 48px;
}
.authorRelevantContentNametext{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px;
  height: 48px;
  line-height: 24px;
  letter-spacing: 0;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}
.authorRelevantContetnum{
  padding-top: 11px;
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #9195a3;
  letter-spacing: 0;
  line-height: 16px;
}
.newsHot{
  margin: 7px 0;
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.newsHotindex{
  color: #9195a3;
  width: 18px;
  padding-top: 1px;
  height: 21px;
  line-height: 22px;
  font-size: 17px;
  letter-spacing: -1px;
  margin-right: 3px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-weight: 500;
}
.newsHotname{
  flex: 1;
  color: #333;
  text-align: justify;
  font-size: 16px;
  line-height: 18px;
  font-family: Arial,sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  vertical-align: middle;
  -webkit-box-align: center;
}
.newsHotstate{
    margin-left:5px ;
    height: 16px;
    width: 16px;
    color: white;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
}
.newsHotname:hover{
  color: rgb(49,94,251);
}
.authorRelevantContentNametext:hover{
  color: rgb(49,94,251);
}
.pinlun{
  margin: 50px 0 0 0;
  padding: 20px 0 0 0;
  border-top: 0.5px solid #e0e0e0;
}
.pinlunlist{
  padding: 0 0 20px 0;
}
.pushpinlun{
  font-family: PingFangSC-Semibold;
  font-size: 18px;
  line-height: 1;
  color: #000;
}
.mepinglun{
  margin-top: 30px;
}
.text-area{
  padding: 16px 16px 23px;
  flex: 1;
  background: #f5f5f6;
  border-radius: 12px;
  border: none;
  height: 70px;
  color: #1f1f1f;
  outline:none;
  font: 15px arial;
}
.x-interact-publish-cont{
  display: flex;
  align-items: center;
  border-radius: 12px;
}
.headimg{
  width: 50px;
  height: 50px;
  margin: 0 20px 0 0 ;
  border-radius: 50%;
  align-content: center;
  justify-items: center;
	display: flex;
}
.contentheadimg{
  width: 50px;
  height: 50px;
  margin: 0 20px 0 0 ;
  border-radius: 50%;
}
.headimgsize{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.pinglunContent{
  padding-top: 25px;
  display: flex;
}
.commentName{
  font-family: PingFangSC-Semibold;
  font-size: 13px;
  color: #222;
  margin: 0;
}
.commentcontent{
  padding-top: 10px;
  font: 14px/22px PingFangSC-Regular;
  color: #222;
  text-align: justify;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
}
.commenttime{
  padding-top: 5px;
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #9195a3;
}
.pinglunbutton{
  display: flex;
  padding-top: 15px;
  justify-content: flex-end;
}
.xcp-list-loader{
  margin-top: 64px;
  height: 42px;
  font: 14px PingFangSC-Regular;
  text-align: center;
  line-height: 42px;
  color: #626675;
  background: #f5f5f6;
  border-radius: 6px;
  cursor: pointer;
}
.clienttopleft{
	flex:1;
	padding-left: 20px;
	font-size: 16px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	width:100%;
}
.ma-img{
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 100%;
  color: rgb(241, 243, 248);
  cursor: pointer;
  right: 20px;
}
.headimg{
  width: 32px;
  height: 32px;
  border-radius: 50%;
	z-index:9999;
	display: flex;
}
.clienttopright{
	display: flex;
	align-items: center;
	margin-right: 20px;
	justify-content: right;
	font-size: 16px;
	color: white;
	cursor: pointer;
}
.gohome{
  color: #000;
  font-size: 13px;
  line-height: 13px;
  margin-right: 22px;
  font: 13px arial;
}
.gohome:hover{
  color: rgb(49,94,251);
}
.newsCome {
  font-size: 15px;
  color: #9195a3;
  font-weight: normal;
  margin-top: 9px;
  line-height: 30px;
  margin-bottom: 20px;
}
</style>